<template>
    <header class="header">
        <nav class="navbar">
            <div class="container">
                <div class="nav_posi">
                    <div class="flex_between" :class="Reverse ? 'Reverse' : ''">
                        <div class="navbar-brand flex_ ">
                            <div class="brand fw700  f-24 shou " @click="goHome">IPTV Playlist</div>
                            <div class="iptbox flex_ PCSHOW" v-if="index != 1">
                                <img src="@/assets/search.webp" class="img" alt="">
                                <input type="text" :placeholder="$t('home.Pleaseinput')" class="elinput" v-model="input"
                                    @input="handleInput">
                            </div>
                        </div>
                        <div class="navbar-collapse shou flex_">
                            <!-- <img src="@/assets/block.webp" class="blockbg" alt=""> -->
                            <div class="make shou  f-16" @click="goAdmin" v-if="index != 1">
                                {{ $t('home.makemoney') }}
                                <img class="img" src="@/assets/vip.webp" alt="">
                            </div>
                            <div class="flex_ dropdown" @click.stop="openBtn = !openBtn">
                                <div class="c-333 f-14">{{ list[current] }}</div>
                                <div class="dropdownImg" v-if="!openBtn"></div>
                                <div class="dropdownImg-up" v-else></div>
                            </div>
                            <div class="dropdown-app c-000" @click.stop="openBtnApp = !openBtnApp"></div>
                            <div class="login shou  f-14 PCSHOW" @click="showDialogVisible" v-if="!uid">
                                {{ $t('home.Login') }}
                            </div>
                            <div class="login shou  f-14 PCSHOW" v-else @click="logOut">{{ $t('home.Signout') }}
                            </div>
                            <div class="APPSHOW">
                                <div class="loginImg" @click="showDialogVisible" v-if="!uid"></div>
                                <div class="loginImg1" v-else @click="logOut"></div>
                            </div>
                        </div>
                    </div>
                    <div :class="Reverse ? 'Reverse' : ''">
                        <div class="language-content flex_between" v-show="openBtn">
                            <div class="item shou" :class="current == k ? 'changeItem' : ''" :key="k"
                                v-for="(item, k) in list" @click.prevent="changeLanguage($event, item, k)">
                                {{ item }}
                            </div>
                        </div>
                        <div class="app_language" v-if="openBtnApp">
                            <div class="item shou" :key="k" v-for="(item, k) in list"
                                @click.prevent="changeLanguage($event, item, k)">
                                {{ item }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="iptbox flex_ APPSHOW" v-if="index != 1">
                    <img src="@/assets/search.webp" class="img" alt="">
                    <input type="text" :placeholder="$t('home.Pleaseinput')" class="elinput" v-model="input"
                        @input="handleInput">
                </div>
            </div>
        </nav>
    </header>
</template>

<script>
import {
    mapState,
    mapGetters,
    mapMutations
} from "vuex";
export default {
    computed: {
        ...mapGetters(["language", "uid", "Reverse"]),
        current() {
            return this.list1.findIndex((x) => x == this.language);
        },
        path() {
            if (this.$route.path.length < 2) {
                return "en";
            } else {
                return this.$route.path.substring(1, 3);
            }
        },
    },
    mounted() {
        if (!localStorage.getItem("language")) {
            localStorage.setItem("language", "en");
            this.setLanguageHandel("en");
        } else {
            this.setLanguageHandel(localStorage.getItem("language"));
        }
    },
    data() {
        return {
            input: '',
            openBtn: false,
            openBtnApp: false,
            appLanguage: false,
            list: [
                "English", // 英语
                "Português", // 葡萄牙语
                "عَرَبِيّ", // 阿拉伯语
                "Español", // 墨西哥
                "فارسی ",
            ],
            list1: [
                "en", //
                "pt", // 葡萄牙语
                "ar", // 阿拉伯语
                "es", //墨西哥
                "fa", //波斯语
            ],
            throttleTimeout: null,

        };
    },

    props: {
        pageType: {
            type: Boolean,
            required: false,
        },
        index: {
            type: String,
            default: 0
        }
    },
    methods: {
        ...mapMutations(["setLanguage"]),
        setLanguageHandel(lang) {
            this.setLanguage(lang);
        },

        changeLanguage(event, item, k) {
            event.preventDefault(); // 抑制默认的链接行为
            localStorage.setItem("language", this.list1[k]);
            this.setLanguage(this.list1[k]);
            this.openBtn = false;
            this.$i18n.locale = this.list1[k];
        },
        changeOpenBtn() {
            this.openBtn = !this.openBtn;
        },
        closeApp() {
            this.appLanguage = !this.appLanguage;
            this.openBtnApp = !this.openBtnApp;
        },
        close() {
            this.openBtn = false;
            this.openBtnApp = false;
            this.appLanguage = false;
        },
        goAdmin() {
            this.$emit('goAdmin')
        },
        showDialogVisible() {
            this.$emit('showDialogVisible')
        },
        logOut() {
            this.$emit('logOut')

        },
        handleInput() {
            // 清除之前的节流定时器
            if (this.throttleTimeout) {
                clearTimeout(this.throttleTimeout);
            }
            // 设置新的节流定时器
            this.throttleTimeout = setTimeout(() => {
                this.search();
            }, 500); // 500 毫秒延迟，可以根据需要调整
        },
        search() {
            this.$emit('fetchMediaList', this.input)
        },
        goHome() {
            this.$router.push('/')
        }
    },
};
</script>
<style lang="scss" scoped>
::v-deep.el-message-box {
    background-color: #222C44 !important;
}

.iptbox {
    position: relative;
    width: 240px;
    height: 36px;
    background: rgba(48, 51, 72, 0.5);
    border-radius: 30px;
    color: rgba(255, 255, 255, 0.5);
    padding-left: 36px;
    z-index: 100;

    .img {
        position: absolute;
        top: 6px;
        left: 8px;
        width: 24px;
        height: 24px;
    }

    .elinput {
        flex: 1;
        color: rgba(255, 255, 255, 0.5);
    }
}

.header {
    color: #eee;
    padding-top: 20px;

    .navbar {
        position: relative;

    }

    .nav_posi {
        z-index: 100;
        position: relative;

    }

    .container {
        .navbar-brand {
            position: relative;

            .brand {
                padding: 20px 0;
                // background: linear-gradient(242deg,
                //         #ffbc68 0%,
                //         #ff4aaa 49%,
                //         #6b46ff 100%);
                padding-right: 28px;
                white-space: nowrap;
                font-family: 'Arial-Bold', Italic;
                font-style: italic;
                z-index: 100;
            }

            .pinkbg {
                position: absolute;
                top: -20px;
                left: -500px;
                width: 950px;
                height: auto;
                z-index: 1;
            }


        }

        .app-dropdown {}

        .navbar-collapse {
            position: relative;

            .blockbg {
                position: absolute;
                top: -40px;
                left: -100px;
                width: 150px;
                height: auto;
                z-index: 1;
            }

            .login {
                margin-left: 40px;
                height: 36px;
                line-height: 36px;
                background: rgba(76, 78, 95, 0.5);
                border-radius: 5px 5px 5px 5px;
                padding: 0 14px;
            }

            .make {
                position: relative;
                margin-right: 30px;
                width: 125px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                background: linear-gradient(95deg, #E202EA 0%, #320BFB 100%);
                border-radius: 5px 5px 5px 5px;
                font-family: Arial-Bold;

                .img {
                    position: absolute;
                    top: -20px;
                    right: -16px;
                    width: 36px;
                    height: 36px;
                }
            }

            .dropdown {
                .dropdownImg {
                    margin-left: 10px;
                    width: 20px;
                    height: 20px;
                    background-image: url("@/assets/dropdown.webp");
                    /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                    background-size: 20px 20px;
                    background-repeat: no-repeat;
                }

                .dropdownImg-up {
                    margin-top: 4px;
                    margin-left: 10px;
                    width: 20px;
                    height: 20px;
                    background-image: url("@/assets/dropdown-up.webp");
                    background-size: 20px 20px;
                    background-repeat: no-repeat;
                }
            }

            .dropdown-app {
                display: none;
            }
        }


    }
}

.language-content {
    position: absolute;
    right: 0px;
    top: 60px;
    padding: 6px 20px;
    padding-right: 0;
    padding-left: 34px;
    width: 327px;
    border-radius: 8px;
    border: 1px solid #344264;
    flex-wrap: wrap;
    background: #222C44;
    z-index: 9999;

    .item {
        z-index: 9999;
        font-size: 14px;
        width: 50%;
        margin: 12px 0;
    }

    .changeItem {
        color: #433aff;
    }
}

.APPSHOW {
    display: none;
}

.Reverse {
    .navbar-brand {
        .brand {
            margin-left: 20px;
            margin-right: 0;
        }

        .iptbox {
            padding-right: 36px;
            padding-left: 10px;

            .img {
                right: 8px;
            }
        }
    }

    .dropdown {
        margin: 0 20px;
    }

    .login {
        margin-left: 0 !important;
    }

    .language-content {
        left: 0;
        padding-left: 0;
        padding-right: 34px;
    }

}

@media (max-width: 992px) {
    .PCSHOW {
        display: none;
    }

    .APPSHOW {
        display: block;

        .loginImg {
            margin-left: 18px;
            width: 24px;
            height: 24px;
            background-image: url("@/assets/loginImg.webp");
            background-size: 24px 24px;
            background-repeat: no-repeat;
        }

        .loginImg1 {
            margin-left: 18px;
            width: 24px;
            height: 24px;
            background-image: url("@/assets/loginImg1.webp");
            background-size: 24px 24px;
            background-repeat: no-repeat;
        }
    }

    .header {
        padding-top: 0px !important;
    }

    .nav_posi {
        .app_language {
            position: absolute;
            top: 50px;
            right: 0;
            padding: 10px;
            min-width: 120px;
            background: #222C44;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #344264;

            .item {
                padding: 8px 0;
                color: #7F90BC;
                font-size: 14px;
            }
        }
    }

    .container {
        padding: 0 14px;

        .inputClass {
            display: none;
        }

        .iptbox {
            width: 100%;
            z-index: 1;

            .elinput {
                flex: 1;
                height: 100%;
                width: 100%;
                padding-right: 30px;

            }
        }

        .navbar-brand {
            .brand {
                font-size: 20px !important;
            }
        }

        .navbar-collapse {
            .make {
                padding: 0 10px;
                width: auto !important;
                min-width: 80px;
                height: 28px !important;
                line-height: 28px !important;
                font-size: 14px;
                margin-right: 18px !important;
                font-family: Arial-Bold;
            }

            .dropdown {
                display: none !important;

                .dropdownImg {
                    margin-left: 10px;
                    width: 20px;
                    height: 20px;
                    background-image: url("@/assets/dropdown.webp");
                    background-size: 20px 20px;
                    background-repeat: no-repeat;
                }

                .dropdownImg-up {
                    margin-left: 10px;
                    width: 20px;
                    height: 20px;
                    background-image: url("@/assets/dropdown-up.webp");
                    background-size: 20px 20px;
                    background-repeat: no-repeat;
                }
            }

            .dropdown-app {
                display: block !important;
                width: 24px !important;
                height: 24px !important;
                background-image: url("@/assets/drawer.webp");
                /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                background-size: contain !important;
                background-repeat: no-repeat;
            }
        }
    }

    .language-content {
        position: static !important;
        padding-top: 0px !important;
        padding-bottom: 10px;
        color: #433aff;
        font-size: 16px;
        font-weight: 400;
        flex-wrap: wrap;
        width: 100% !important;
        border: 0 !important;
        padding-left: 0 !important;

        .item {
            z-index: 9999;
            color: #1d212c;
            font-size: 14px;
            width: 50%;
            margin: 12px 0;
        }
    }

    .Reverse {
        .navbar-brand {
            .brand {
                margin-left: 0;
                margin-right: 0;
                padding-right: 0 !important;
            }

            .iptbox {
                padding-right: 36px;
                padding-left: 10px;

                .img {
                    right: 8px;
                }
            }
        }

        .dropdown-app {
            margin: 0 20px;
        }

        .dropdown {
            margin: 0 20px;
        }

        .login {
            margin-left: 0 !important;

        }

        .loginImg {
            margin-left: 0;
        }

        .app_language {
            left: 0;
            padding-right: 10px;
            right: auto;
        }
    }
}

// 宽度小于768
@media (max-width: 768px) {

    .PCSHOW {
        display: none;
    }

    .APPSHOW {
        display: block;

        .loginImg {
            margin-left: 18px;
            width: 24px;
            height: 24px;
            background-image: url("@/assets/loginImg.webp");
            background-size: 24px 24px;
            background-repeat: no-repeat;
        }

        .loginImg1 {
            margin-left: 18px;
            width: 24px;
            height: 24px;
            background-image: url("@/assets/loginImg1.webp");
            background-size: 24px 24px;
            background-repeat: no-repeat;
        }
    }

    .header {
        padding-top: 0px !important;
    }

    .nav_posi {
        .app_language {
            position: absolute;
            top: 50px;
            right: 0;
            padding: 10px;
            min-width: 120px;
            background: #222C44;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #344264;

            .item {
                padding: 8px 0;
                color: #7F90BC;
                font-size: 14px;
            }
        }
    }

    .container {
        padding: 0 14px;

        .inputClass {
            display: none;
        }

        .iptbox {
            width: 100%;
            z-index: 1;

            .elinput {
                flex: 1;
                height: 100%;
                width: 100%;
                padding-right: 30px;

            }
        }

        .navbar-brand {
            .brand {
                font-size: 16px !important;
            }
        }

        .navbar-collapse {
            .make {
                padding: 0 10px;
                width: auto !important;
                min-width: 80px;
                height: 28px !important;
                line-height: 28px !important;
                font-size: 12px;
                margin-right: 18px !important;
                font-family: Arial-Bold;
            }

            .dropdown {
                display: none !important;

                .dropdownImg {
                    margin-left: 10px;
                    width: 20px;
                    height: 20px;
                    background-image: url("@/assets/dropdown.webp");
                    background-size: 20px 20px;
                    background-repeat: no-repeat;
                }

                .dropdownImg-up {
                    margin-left: 10px;
                    width: 20px;
                    height: 20px;
                    background-image: url("@/assets/dropdown-up.webp");
                    background-size: 20px 20px;
                    background-repeat: no-repeat;
                }
            }

            .dropdown-app {
                display: block !important;
                width: 24px !important;
                height: 24px !important;
                background-image: url("@/assets/drawer.webp");
                /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
                background-size: contain !important;
                background-repeat: no-repeat;
            }
        }
    }

    .language-content {
        position: static !important;
        padding-top: 0px !important;
        padding-bottom: 10px;
        color: #433aff;
        font-size: 16px;
        font-weight: 400;
        flex-wrap: wrap;
        width: 100% !important;
        border: 0 !important;
        padding-left: 0 !important;

        .item {
            z-index: 9999;
            color: #1d212c;
            font-size: 14px;
            width: 50%;
            margin: 12px 0;
        }
    }

    .Reverse {
        .navbar-brand {
            .brand {
                margin-left: 0;
                margin-right: 0;
                padding-right: 0 !important;
            }

            .iptbox {
                padding-right: 36px;
                padding-left: 10px;

                .img {
                    right: 8px;
                }
            }
        }

        .dropdown-app {
            margin: 0 20px;
        }

        .dropdown {
            margin: 0 20px;
        }

        .login {
            margin-left: 0 !important;

        }

        .loginImg,
        .loginImg1 {
            margin-left: 0;
        }

        .app_language {
            left: 0;
            padding-left: 0;
            padding-right: 10px;
            right: auto;
        }
    }
}
</style>